import { scoreOrder } from '@/servers/api/userController';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Button, Modal, Radio, RadioChangeEvent, message } from 'antd';
import { Dispatch, SetStateAction, useState } from 'react';
import './BuyPoints.less'
type IParams = {
    isModalOpen: boolean;
    setisModalOpen: Dispatch<SetStateAction<boolean>>;
};
const BuyPointsModal: React.FC<IParams> = (props) => {
    const intl = useIntl();
    const { initialState } = useModel('@@initialState');
    const { site } = initialState as IGlobal.IInitialState;
    const [current, setcurrent] = useState<number>();
    const [result, setresult] = useState<string>();
    const [payType, setPayType] = useState('wxpay');
    const explain = [
        {
            text: (
                <FormattedMessage id="积分可用于参与竞标，一天之内前两次参加免费， 第三次往后参与一个扣10积分，如果为平台会员 则不扣分，免费参与"></FormattedMessage>
            ),
        },
        {
            text: (
                <FormattedMessage id="积分可用于推广置顶，置顶一次扣50个积分"></FormattedMessage>
            ),
        },
    ];
    function clickClass(value: string, index: number) {
        setcurrent(index);
        setresult(value);
    }
    function doBuy() {
        message.error("开发中...请移步至小程序或移动端进行支付！")
        return
        if(!result){
            message.error(intl.formatMessage({id: "请选择积分项"}))
            return
        }
        console.log(site?.scoreConfig[result]);
        scoreOrder({
            openid: '',
            // price: current,
            price: 0.01,
            score: site?.scoreConfig[result],
            method: 'app',
            pay_type: 'wxpay', //wxpay  alipay
        }).then((res) => {
            console.log(res);
        });
    }
    function onChange(e: RadioChangeEvent) {
        console.log(e.target.value);
        setPayType(e.target.value);
    }
    return (
        <Modal
            width="50%"
            title={intl.formatMessage({ id: '充值积分' })}
            open={props.isModalOpen}
            onCancel={() => {
                props.setisModalOpen(false);
                message.warning('已取消');
            }}
            keyboard={false}
            maskClosable={false}
            footer={null}
            className='buyPoints'
        >
            <Radio.Group onChange={onChange} value={payType}>
                <Radio value="wxpay">
                    <FormattedMessage id="微信支付"></FormattedMessage>
                </Radio>
                <Radio value="alipay">
                    <FormattedMessage id="支付宝支付"></FormattedMessage>
                </Radio>
            </Radio.Group>
            <p style={{ fontWeight: 600, marginTop: 30 }}>
                <FormattedMessage id="积分充值"></FormattedMessage>
            </p>
            <ul className="chongzhiList">
                {Object.keys(site?.scoreConfig ?? {}).map((key, index) => (
                    <li
                        key={index}
                        onClick={() => {
                            clickClass(key, index);
                        }}
                        className={current === index ? 'bianse' : ''}
                    >
                        <div className="li-text">
                            {site?.scoreConfig[key]}
                            <FormattedMessage id="积分"></FormattedMessage>
                        </div>
                        <div className="li-money">￥{key}</div>
                    </li>
                ))}
            </ul>
            <p style={{ fontWeight: 600 }}>
                <FormattedMessage id="充值说明"></FormattedMessage>
            </p>
            {explain.map((item, index) => (
                <p
                    style={{ color: 'var(--ant-color-text-tertiary)' }}
                    key={index}
                >
                    {index + 1}、{item.text}
                </p>
            ))}
            <Button
                type="primary"
                block
                style={{ marginTop: 20 }}
                onClick={doBuy}
            >
                <FormattedMessage id="立即充值"></FormattedMessage>
            </Button>
        </Modal>
    );
};
export default BuyPointsModal;
